<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>锤子科技</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_803285_78tdksxhmps.css">
</head>
<body>
    <!-- logo start -->
    <div class="logo ta-c">
        <div class="container row">
            <div class="logo-img float-l"></div>  
            <ul class="row float-l">
                <li><a href="#">在线商城</a></li>
                <li><a href="#">Smartisan&nbsp;M1/M1L</a></li>
                <li><a href="#">Smartisan&nbsp;OS</a></li>
                <li><a href="#">欢喜云</a></li>
                <li><a href="#">应用下载</a></li>
                <li><a href="#">官方论坛</a></li>
            </ul>
            <div class="float-l">
                <span>|</span>
                <button class="b-radius">登入</button>
            </div>
        </div>
    </div>
    <!-- logo end -->
    <div class="container">
        <!-- nav start -->
        <div class="nav row border-bottom">
            <ul class="row float-l ">
                <li><a href="#">精选</a></li>
                <li class="drop ">
                    <a href="#">手机</a>
                    <div class="drop-content pa row none border-bottom">                        
                        <div class="col-20 ta-c">
                            <a href="#" class="row">
                                <img src="images/shouji1.png"><br>
                                <h>坚果Pro&nbsp;2S</h>
                                <p>￥1978.00&nbsp;起</p>    
                            </a>                         
                        </div>
                        <div class="col-20 ta-c">
                            <a href="#" class="row">
                                <img src="images/shouji1.png"><br>
                                <h>坚果Pro&nbsp;2S</h>
                                <p>￥1978.00&nbsp;起</p>    
                            </a>                         
                        </div>
                        <div class="col-20 ta-c">
                            <a href="#" class="row">
                                <img src="images/shouji1.png"><br>
                                <h>坚果Pro&nbsp;2S</h>
                                <p>￥1978.00&nbsp;起</p>    
                            </a>                         
                        </div>
                        <div class="col-20 ta-c">
                            <a href="#" class="row">
                                <img src="images/shouji1.png"><br>
                                <h>坚果Pro&nbsp;2S</h>
                                <p>￥1978.00&nbsp;起</p>    
                            </a>                         
                        </div>
                        <div class="col-20 ta-c">
                            <a href="#" class="row">
                                <img src="images/shouji1.png"><br>
                                <h>坚果Pro&nbsp;2S</h>
                                <p>￥1978.00&nbsp;起</p>    
                            </a>                         
                        </div>
                    </div>
                </li>
                <li><a href="#">耳机/音响</a></li>
                <li><a href="#">背壳/保护套</a></li>
                <li><a href="#">情怀/背壳</a></li>
                <li><a href="#">其他周边</a></li>
                <li><a href="#">保修服务</a></li>
                <li><a href="#">全部商品</a></li>
            </ul>
            <div class="ta-c">
                <i class="iconfont icon-iconfontcart"></i>
                <span class="shopping_cart pr">
                    购物车
                    <div class="pa none b-radius">
                        <i class="iconfont icon-iconfontcart block"></i>
                        <h>购物车为空</h>
                        <p>您还没有选购任何商品，现在前往商城选购吧!</p>
                    </div>
                <span/>
                <span>0</span>
            </div>
        </div>
    </div>
        <!-- nav-end -->
<!-- container-center -->
    <div class="main">
        <div class="banner pr">
            <img src="images/index_02.png" class=" picture pa">
            <img src="images/index_03.png" alt="" class=" picture pa">
        </div>
        <div class="display row">
            <div class="col-3 pr border-right box-shadow"></div>
            <div class="col-3 pr border-right box-shadow"></div>
            <div class="col-3 pr border-right box-shadow"></div>
            <div class="col-3 pr box-shadow"></div>
        </div>
<!-- hot start -->
        <div class="hot row">
            <p>热门商品</p>
            <div class="col-3 ta-c pr border-right box-shadow">
                <img src="images/5-1.jpg" alt="">
                <h4>Smartisan&nbsp;坚果自拍杆</h4>
                <h>通用3.5mm接口，航空铝合金伸缩杆</h>
                <div class="change">
                    <ul   >
                        <li class="hong  choice">
                            <div ><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥69.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow">
                <img src="images/5-2.jpg" alt="">
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <h>首次向中国读者介绍其作品</h>
                <div class="change">
                    <ul>
                        <li >
                            <!-- <div class=""></div> -->
                        </li>
                    </ul>
                </div>
                <div class="price">￥199.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow">
                <img src="images/5-3.jpg" alt="">
                <h4>Smartisan M1/M1L 软胶保护套</h4>
                <h>TPU环保材质、细腻防滑、防油污</h>
                <div class="change">
                    <ul>
                        <li class="hong  choice ">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                        <li class="hong ">
                            <div><img src="images/list02.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥49.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c box-shadow">
                <img src="images/5-4.jpg" alt="">
                <h4>Smartisan&nbsp;S-100半入耳式耳机</h4>
                <h>卓越的14.2mm发音单元、三按键式线控</h>
                <div class="change">
                    <ul>
                        <li class="hong center choice">
                            <div ><img src="images/list01.jpg" alt=""></div>
                        </li>
                        <li class="hong ">
                            <div><img src="images/list02.jpg" alt=""></div>
                        </li>
                        <li class="hong  ">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥69.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>            
        </div>
<!-- hot end -->
<!-- picked start -->
        <div class="picked row">
            <p>官方精选</p>
            <div class="col-6 ta-c pr border-right box-shadow picked-wrap border-bottom">
                <img src="images/6-1.jpg" alt="" class="picture ">
            </div>
            <div class="col-3 ta-c pr border-right box-shadow border-bottom">
                <img src="images/6-2.jpg" alt="">
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <h>首次向中国读者介绍其作品</h>
                <div class="change">
                    <ul>
                        <li class="hong  choice ">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥199.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c box-shadow border-bottom">
                <img src="images/6-3.jpg" alt="">
                <h4>Smartisan M1/M1L 软胶保护套</h4>
                <h>TPU环保材质、细腻防滑、防油污</h>
                <div class="change">
                    <ul>
                        <li >
                            <!-- <div><img src="images/list01.jpg" alt=""></div> -->
                        </li>
                    </ul>
                </div>
                <div class="price">￥49.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow ">
                <img src="images/6-4.jpg" alt="">
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <h>首次向中国读者介绍其作品</h>
                <div class="change">
                    <ul>
                        <li class="hong  choice">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥199.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c box-shadow pr border-right">
                <img src="images/6-5.jpg" alt="">
                <h4>Smartisan M1/M1L 软胶保护套</h4>
                <h>TPU环保材质、细腻防滑、防油污</h>
                <div class="change">
                    <ul>
                        <li>
                            <!-- <div><img src="images/list01.jpg" alt=""></div> -->
                        </li>
                    </ul>
                </div>
                <div class="price">￥49.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow">
                <img src="images/6-7.jpg" alt="">
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <h>首次向中国读者介绍其作品</h>
                <div class="change">
                    <ul>
                        <li class="hong  choice">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥199.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c box-shadow ">
                <img src="images/6-6.jpg" alt="">
                <h4>Smartisan&nbsp;S-100半入耳式耳机</h4>
                <h>卓越的14.2mm发音单元、三按键式线控</h>
                <div class="change">
                    <ul>
                        <li class="hong center choice">
                            <div ><img src="images/list01.jpg" alt=""></div>
                        </li>
                        <li class="hong ">
                            <div><img src="images/list02.jpg" alt=""></div>
                        </li>
                        <li class="hong  ">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥69.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>            
        </div>
<!-- picked end -->
<!-- brand start -->
        <div class="brand row">
            <p>品牌精选</p>
            <div class="col-6 ta-c pr border-right box-shadow brand-wrap border-bottom">
                <img src="images/7-1.jpg" alt="" class="picture ">
            </div>
            <div class="col-3 ta-c pr border-right box-shadow border-bottom">
                <img src="images/5-2.jpg" alt="">
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <h>首次向中国读者介绍其作品</h>
                <div class="change">
                    <ul>
                        <li class="hong  choice ">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥199.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c box-shadow border-bottom">
                <img src="images/7-3.jpg" alt="">
                <h4>Smartisan M1/M1L 软胶保护套</h4>
                <h>TPU环保材质、细腻防滑、防油污</h>
                <div class="change">
                    <ul>
                        <li >
                            <!-- <div><img src="images/list01.jpg" alt=""></div> -->
                        </li>
                    </ul>
                </div>
                <div class="price">￥49.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow ">
                <img src="images/7-4.jpg" alt="">
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <h>首次向中国读者介绍其作品</h>
                <div class="change">
                    <ul>
                        <li class="hong  choice">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥199.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c box-shadow pr border-right">
                <img src="images/7-5.jpg" alt="">
                <h4>Smartisan M1/M1L 软胶保护套</h4>
                <h>TPU环保材质、细腻防滑、防油污</h>
                <div class="change">
                    <ul>
                        <li>
                            <!-- <div><img src="images/list01.jpg" alt=""></div> -->
                        </li>
                    </ul>
                </div>
                <div class="price">￥49.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow">
                <img src="images/7-6.jpg" alt="">
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <h>首次向中国读者介绍其作品</h>
                <div class="change">
                    <ul>
                        <li class="hong  choice">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥199.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>
            <div class="col-3 ta-c box-shadow ">
                <img src="images/7-7.jpg" alt="">
                <h4>Smartisan&nbsp;S-100半入耳式耳机</h4>
                <h>卓越的14.2mm发音单元、三按键式线控</h>
                <div class="change">
                    <ul>
                        <li class="hong center choice">
                            <div ><img src="images/list01.jpg" alt=""></div>
                        </li>
                        <li class="hong ">
                            <div><img src="images/list02.jpg" alt=""></div>
                        </li>
                        <li class="hong  ">
                            <div><img src="images/list01.jpg" alt=""></div>
                        </li>
                    </ul>
                </div>
                <div class="price">￥69.00</div>
                <div class="details ">
                    <button>查看详情</button>
                    <button>加入购物车</button>
                </div>
            </div>            
        </div>
<!-- barand end -->
<!-- trends start -->
        <div class="trends row">
            <p>锤子科技动态</p>
            <div class="col-3 pr border-right box-shadow"></div>
            <div class="col-3 pr border-right box-shadow"></div>
            <div class="col-3 pr border-right box-shadow"></div>
            <div class="col-3 pr box-shadow"></div>
        </div>
<!-- trends end -->
<!-- apply start-->
        <div class="apply row pr">
            <p>锤子应用</p>
            <button class="pa">全部应用&nbsp;></button>
            <div class="col-3 ta-c pr border-right box-shadow  ">
                <div class="apply-top pa">
                    <img src="images/9-1.jpg" alt="">
                    <h4>HandShaker</h4>
                    <p>在Mac和Windows电脑上也可以方便自如地管理你在Android手机中的内容</p>
                    <div class="system">
                        <img src="images/9-5.jpg" alt="">
                    </div>
                </div>
                <div class="apply-button pa none">
                    <img src="images/9-8.jpg" alt="">
                    <p>扫二维码下载锤子标签</p>
                    <a>进一步了解HandShaker></a>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow ">
                <div class="apply-top pa">
                    <img src="images/9-2.jpg" alt="">
                    <h4>Smartisan&nbsp;《深泽直人》</h4>
                    <p>首次向中国读者介绍其作品</p>
                    <div class="system">
                        <img src="images/9-6.jpg" alt="">
                    </div>
                </div>
                <div class="apply-button pa none">
                    <img src="images/9-8.jpg" alt="">
                    <p>扫二维码下载锤子标签</p>
                    <a>进一步了解HandShaker></a>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow ">
                <div class="apply-top pa">
                    <img src="images/9-3.jpg" alt="">
                    <h4>Smartisan&nbsp;《深泽直人》</h4>
                    <p>首次向中国读者介绍其作品</p>
                    <div class="system">
                        <img src="images/9-7.jpg" alt="">
                    </div>
                </div>
                <div class="apply-button pa none">
                    <img src="images/9-8.jpg" alt="">
                    <p>扫二维码下载锤子标签</p>
                    <a>进一步了解HandShaker></a>
                </div>
            </div>
            <div class="col-3 ta-c pr border-right box-shadow ">
                <div class="apply-top pa">
                    <img src="images/9-4.jpg" alt="">
                    <h4>Smartisan&nbsp;《深泽直人》</h4>
                    <p>首次向中国读者介绍其作品</p>
                    <div class="system">
                        <img src="images/9-7.jpg" alt="">
                    </div>
                </div>
                <div class="apply-button pa none">
                    <img src="images/9-8.jpg" alt="">
                    <p>扫二维码下载锤子标签</p>
                    <a>进一步了解HandShaker></a>
                </div>
            </div>
        </div>        
<!-- apply end -->
<!-- forum strart -->
        <div class="forum row pr">
            <p>论坛精选</p>
            <button class="pa">前往论坛&nbsp;></button>
            <div class="col-3 pr border-right box-shadow ">
                <div class="center">
                    <img src="images/10_1.png" alt="">
                </div>
                <h4>人造人罗永浩为您介绍Smartisan OS</h4>
                <p>在Mac和Windows电脑上也可以方便自如地管理你在Android手机中的内容</p>
                <a href="#">阅读全文&nbsp;></a>
            </div>
            <div class="col-3 pr border-right box-shadow ">
                <div class="center">
                    <img src="images/10_2.png" alt="">
                </div>
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <p>首次向中国读者介绍其作品</p>
                <a href="#">阅读全文&nbsp;></a>
            </div>
            <div class="col-3 pr border-right box-shadow ">
                <div class="center">
                    <img src="images/10-3.jpg" alt="">
                </div>
                <h4>Smartisan&nbsp;《深泽直人》</h4>
                <p>首次向中国读者介绍其作品</p>
                <a href="#">阅读全文&nbsp;></a>
            </div>
            <div class="col-3 box-shadow ">
                <div class="center">
                    <img src="images/10-4.jpg" alt="">
                </div>
                <h4>扫二维码下载锤子标签</h4>
                <p>fsdjkngjchfoidrorpwkvfld;lka/knblmvicljrkjb</p>
                <a href="#">阅读全文&nbsp;></a>
            </div>
        </div>
<!-- forum end -->
    </div>
<!-- container-conter end -->
<!-- foot start -->
    <div class="foot">
        <div class="container">
            <div class="row">
                <ul>
                    <ol>订单服务</ol>
                    <li><a href="#">购买指南</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">送货政策</a></li>
                </ul>
                <ul>
                    <ol>订单服务</ol>
                    <li><a href="#">购买指南</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">送货政策</a></li>
                </ul>
                <ul>
                    <ol>订单服务</ol>
                    <li><a href="#">购买指南</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">送货政策</a></li>
                </ul>
                <ul>
                    <ol>订单服务</ol>
                    <li><a href="#">购买指南</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">送货政策</a></li>
                </ul>
                <ul>
                    <ol>订单服务</ol>
                    <li><a href="#">购买指南</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">送货政策</a></li>
                </ul>
                <ul>
                    <ol>订单服务</ol>
                    <li><a href="#">购买指南</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">送货政策</a></li>
                </ul>
                <div class="help">
                    <h1>400-619-0909</h1>
                    <p>周一到周日 9:00-18:00（仅收市话费）</p>
                    <button class="b-radius "><i class="iconfont icon-iconfontquestion pr"></i>&nbsp; &nbsp;在线帮助</button>
                </div>
            </div>
            
            <div class="footer pr">
                <p>Copyright © , Smartisan Digital Co., Ltd. All Rights Reserved.
                    北京锤子数码科技有限公司
                    <a href="#">&nbsp;法律声明&nbsp;</a>
                    <a href="#">&nbsp;隐私条款&nbsp; </a>
                    <a href="#">&nbsp;开发者中心 </a>
                    <br/>
                </p>
                <h>京ICP备14041720号-1京ICP证140622号京公网安备11010502025474 网络文化经营许可证京网文(2016)2284-266号</h>
                <div class="pa">
                    <select name="" id="">
                        <option value="中文" >中文</option>
                        <option value="中文"><i class="" ></i>中文</option>
                        <option value="中文" ><i class="" ></i>中文</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
<!-- foot end -->
    <!-- <script>
        $(".hong").click(function(){
            $(this).addClass("choice").siblings().removeClass("choice");
        })
    </script> -->
</body>
</html>